<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      #box{
        width:1000px;
        padding:5px;
        border:1px solid #ccc;
        background:#fff;
        margin:10px;
      }

      .popup{
        padding:5px;
        border:1px solid black;
        background:#eee;
        width:100px;
        height:100px;
      }

      .button{
        display:inline-block;
        padding:5px;
        border:1px solid black;
        background:#eee;
        text-align:center;
        margin-right:5px;
        cursor:default;
        -moz-user-select:none;
        -webkit-user-select:none;
      }

      .button-hover,
      .popup-hover{
        border-color:#00f;
        box-shadow:0 0 4px #005;
      }

      .button-active,
      .popup-active{
        background-color:#f00;
      }

      .button-disabled,
      .popup-disabled{
        border-color:#ccc;
      }
    </style>
  </head>
  <body>
    <button onmousedown="test();" popupButton="true">test</button>
    <input type="checkbox" checked="true" onclick="b2.setEnabled(this.checked);"/>
    <div id="box">hello jsui!</div>

    <script src="jquery.min.js"></script>
    <script src="jsui.js"></script>
    <script>
      var b1 = new jsui.Button('button1');
      b1.onClick = function(e) {
        console.info(e.target);
      };
      b1.render();
      b1.setEnabled(false);

      var b2 = new jsui.Button('button2');
      b2.onClick = function(e) {
        alert('b2 clicked!');
        p2.show();
      };
      b2.render();
      b2.hide();
      b2.show();

      var p1 = new jsui.Popup('button2');
      p1.render();

      var p2 = new jsui.Popup('button2');
      p2.render();

      function test(){
        p1.show();
      }

    </script>
  </body>
</html>
